<template>
    <div class="list_page_div">
        <page-list :loading="loading" :table-config="tableConfig" :data-list="dataList" :height="height" show-index
				   show-operate operate-width="180px" children-name="childList">
            <template #searchArea>
                <el-input v-model="param.powerCode" clearable placeholder="权限编号" style="width: 200px;"></el-input>
                <el-input v-model="param.powerName" clearable placeholder="权限名称" style="width: 200px;"></el-input>
                <el-input v-model="param.powerPath" clearable placeholder="权限路径" style="width: 200px;"></el-input>
                <el-button type="primary" @click="searchList">查询</el-button>
                <el-button type="primary" @click="resetData">重置</el-button>
				<el-button type="primary" @click="editData()" v-if="userId==1">新增</el-button>
                <el-button type="primary" @click="sortData" v-if="userId==1">排序</el-button>
            </template>showStyle

            <template #item_showStyle="scope" >
                <template v-if="scope.row.parentsId==0">
                <img :src="$store.state.fileURL+scope.row.showStyle" height="20px">
                </template>
                <template v-else>
                   <i :class="scope.row.showStyle" style="font-size: 20px"></i>
                </template>
            </template>
            <template #item_powerType="scope">
                {{ scope.row.powerType == '1' ? "菜单" : '按钮' }}
            </template>
            <template #item_enableFlag="scope">
                {{ $common.getDicName('yesNo', scope.row.enableFlag) }}
            </template>
            
            <template #operateContent="scope" v-if="userId==1">
                <el-button type="text" @click="editData(scope.row.id)">编辑</el-button>
				<el-popconfirm title="是否确定删除当前数据？" @confirm="delData(scope.row.id)">
					<el-button slot="reference" type="text">删除</el-button>
				</el-popconfirm>
				<el-button type="text" @click="editBtn(scope.row)">按钮信息</el-button>
            </template>
        </page-list>
        <!-- 排序 -->
        <power-sort :visible.sync="showSort" :data="sortDataList" @change="editSort"></power-sort>
        <!-- 编辑 -->
		<power-edit :visible.sync="showEdit" :id="id" @refreshList="searchList"></power-edit>
		<!-- 按钮列表 -->
		<power-btn-list :visible.sync="showBtn" :menuInfo="menuInfo"></power-btn-list>
    </div>
</template>

<script>
import PageList from "@/components/grid/pageList";
import SelectOption from "@/components/select/selectOption";
import PowerSort from "./component/powerSort";
import PowerEdit from "./component/powerEdit";
import PowerBtnList from "./component/powerBtnList";

export default {
    name: "limitList",
    components: {PowerBtnList, PowerEdit, SelectOption, PowerSort, PageList},
    data() {
        return {
            height: 300,
            loading: false,
            showEdit: false,
            showSort: false,
			showBtn: false,
            
            id: 0,
            tableConfig: [
                {label: "权限主键", prop: "id", width: 160},
				{label: "权限名称", prop: "powerName", width: 160},
                {label: "编号/权限", prop: "powerCode", width: 200},
                {label: "显示样式", prop: "showStyle", width: 100, slot: true},
                {label: "权限类型", prop: "powerType", width: 80, slot: true},
                {label: "权限路径", prop: "powerPath", minWidth: 200},
                {label: "启用", prop: "enableFlag", width: 60, slot: true},
            ],
            dataList: [],
            total: 0,
            param: {
                powerCode: '',
				powerName: '',
                powerPath: '',
                field: 'power_type, parents_id, order_num',
                order: 'asc',
            },
			programList: [],
	
			sortDataList: [],
			menuInfo: {},

            userId: '',
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.userId = this.$root.getStorage('userId');
            this.height = document.body.offsetHeight - 150;
        })
        this.searchList();
    },
    methods: {
        resetData() {
            this.param.powerCode = '';
            this.param.powerName = '';
            this.param.powerPath = '';
            this.searchList();
        },
        searchList() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemPower/getAllList", this.param).then(res => {
                this.dataList = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        editData(id) {
            this.id = id;
            this.showEdit = true;
        },
        delData(id) {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemPower/delete/" + id).then(res => {
                this.searchList();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
		sortData() {
			this.showSort = true;
			this.sortDataList = this.dataList;
		},
        editSort(treeList) {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemPower/orderNo", {
                entityList: treeList
            }).then(res => {
                this.searchList();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
		editBtn(menuInfo) {
			this.menuInfo = menuInfo;
			this.showBtn = true;
		}
    }
}
</script>

<style scoped>

</style>